<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-10-27 09:29:33
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-10-30 17:49:14
 * @FilePath: \v9\src\components\DefiniteDetailed\purchase.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="drawer_container">
    <div class="drawer_container_header">
      <el-tabs
        class="heder_left"
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="商品明细" name="first"></el-tab-pane>
        <el-tab-pane label="订单号明细" name="second"></el-tab-pane>
      </el-tabs>
      <div class="header_right">
        <!-- <el-button @click="showChartnew">图表</el-button> -->
        <el-button type="primary" @click="export_zcExportSkuDetailPurReport"
          >导出</el-button
        >
      </div>
    </div>
    <div v-if="activeName == 'first'">
      <el-table
        ref="multipleTable"
        v-loading="drawer_loading"
        :data="drawer_list"
        element-loading-text="加载中"
        fit
        highlight-current-row
        :header-cell-class-name="this.$verticaline"
        :height="borderHeight"
      >
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column
          label="关联订单号"
          prop="relate_order_sn"
        ></el-table-column>
        <el-table-column label="采购数量" prop="purchase_num" />
        <el-table-column
          label="采购价格"
          prop="purchase_price"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.purchase_price }}
          </template>
        </el-table-column>

        <el-table-column label="采购日期" prop="created_at" width="200">
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <el-table
        ref="multipleTable"
        v-loading="drawer_loading"
        :data="drawer_list"
        element-loading-text="加载中"
        fit
        highlight-current-row
        :header-cell-class-name="this.$verticaline"
        :height="borderHeight"
      >
        <el-table-column label="关联订单号" prop="relate_order_sn">
        </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="采购数量" prop="order_num" />
        <el-table-column
          label="采购价格"
          prop="purchase_price"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.purchase_price }}
          </template>
        </el-table-column>

        <el-table-column label="采购日期" prop="created_at" width="200">
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      style="float: right; margin-top: 10px"
      :current-page="current_drawer.page"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="current_drawer.per_page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount_drawer"
      background
      @size-change="
        (page) => {
          changeLimit(page);
        }
      "
      @current-change="
        (page) => {
          changePage(page);
        }
      "
    />
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import {
  getZcGetBuySupplierDetailList,
  getZcGetBuySupplierDetailReportList,
  getZcGetBuySupplierOrderlList,
  getZcGetBuySupplierOrderlReportList,
} from "@/api/report/index";
import { exportMethod } from "@/utils/index";
export default {
  mixins: [mixins],
  props: {
    title: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      activeName: "first",
      exportMethod,
      drawer_list: [],
      // 明细总条数
      totalCount_drawer: 0,
      drawer_loading: false,
      current_drawer: {
        page: 1,
        per_page: 20,
      },
      id: null,
    };
  },
  created() {
    this.getNumerical(180);
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
      this.current_drawer.page = 1;
      this.getList(this.id);
      this.drawer_loading = true;
    },
    // 导出
    export_zcExportSkuDetailPurReport() {
      let data = {
        purchase_id: this.id,
      };
      let query = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      if (this.activeName == "first") {
        getZcGetBuySupplierDetailReportList(query).then((res) => {
          this.exportMethod(res, "采购商品明细导出", notify);
        });
      } else {
        getZcGetBuySupplierOrderlReportList(query).then((res) => {
          this.exportMethod(res, "采购订单号明细导出", notify);
        });
      }
    },
    // 页数改变时会触发
    changeLimit(size) {
      this.getList(this.id, this.current_drawer.page, size);
    },
    // 页码改变时会触发
    changePage(page) {
      this.getList(this.id, page, this.current_drawer.page);
    },
    // 获取数据
    getList(id, page = 1, per_page = 20) {
      let that = this;
      this.drawer_loading = true;
      this.id = id;
      let data = {
        purchase_id: id,
        per_page: per_page,
        page: page,
      };
      let query = Object.assign(
        {
          sign: Md5(objKeySort(Object.assign(apiUrl().name))),
        },
        apiUrl().name,
        data
      );
      if (that.activeName == "first") {
        getZcGetBuySupplierDetailList(query).then((res) => {
          if (res.errcode == 0) {
            that.totalCount_drawer = res.data.count;
            that.drawer_list = res.data.list;
            that.drawer_loading = false;
          } else {
            that.$message.error(res.errmsg);
            that.drawer_loading = false;
          }
        });
      } else {
        getZcGetBuySupplierOrderlList(query).then((res) => {
          console.log(res);
          if (res.errcode == 0) {
            that.totalCount_drawer = res.data.count;
            that.drawer_list = res.data.list;
            that.drawer_loading = false;
          } else {
            that.$message.error(res.errmsg);
            that.drawer_loading = false;
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-tabs__header {
  margin: 0;
}
</style>